<template>
  <div>
    <el-header>
      <div class="report_header" ref="headerHeight">
        <div class="report_header_left"></div>
        <!-- <div style="width: 300px;display: flex;align-items: center;margin-left: 10px;">
          <svg-icon class="primary" :icon-class="$route.meta.icon"/>
          <span style="margin-left: 5px;" class="primary">{{$route.meta.title}}</span>
        </div> -->
        <div style="display: flex;flex-direction: row;justify-content: flex-end;width: 100%;">
          <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="addClick"
                     v-permission="['sysJob.add']">新增任务</el-button>
        </div>
      </div>
<!--      <div>-->
<!--        <svg-icon class="primary" :icon-class="$route.meta.icon"/>-->
<!--        <span class="primary">{{$route.meta.title}}</span>-->
<!--      </div>-->
<!--      <div class="header-button-container">-->
<!--        <el-button icon="el-icon-plus" type="info" style="margin-left: 10px" @click="addClick" v-permission="['sysJob.add']">新增任务-->
<!--        </el-button>-->
<!--      </div>-->
    </el-header>
    <div class="pd10">
      <el-table
        :data="sysJobData"
        :height="curHeight"
        border
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          align="left"
          width="50"
          fixed>
        </el-table-column>
        <el-table-column
          prop="name"
          label="任务名称"
          align="left"
          min-width>
        </el-table-column>
        <el-table-column
          prop="clazzPath"
          label="任务执行方法"
          align="left"
          width="320">
        </el-table-column>

        <el-table-column
          prop="cron"
          label="任务表达式"
          align="left"
          width="160">
        </el-table-column>

        <el-table-column
          prop="status"
          label="状态"
          align="center"
          width="80">
          <template slot-scope="scope">
               <span>
              {{ scope.row.status | formatStatus}}
               </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="execStatus"
          label="执行状态"
          align="center"
          width="80">
          <template slot-scope="scope">
               <span>
              {{ scope.row.execStatus | formatExecStatus}}
               </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="jobDesc"
          label="任务描述"
          align="center"
          width="500">
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          align="center"
          width="80">
          <template slot-scope="scope">
            <div style="display: flex; justify-content: center;">
              <el-tooltip class="item" effect="dark" content="编辑" placement="top-start" v-permission="['sysJob.edit']">
                <a @click="editClick(scope.row)"><i style="color: #409EFF" class="el-icon-edit" /></a>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top-start" v-permission="['sysJob.del']">
                <a style="margin-left: 10px"  @click="deleteJob(scope.row)"><i style="color: #F56C6C" class="el-icon-delete" /></a>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-footer class="el-footerBox">
      <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                  @pagination="loadJob"></pagination>
    </el-footer>
  </div>
</template>
<script>
  import {list, del} from '@/api/sysJob'
  import {EventBus} from '@/api/eventBus'
  import Pagination from '@/components/Pagination';
  import permission from '@/directive/permission/index.js' // 权限判断指令
  export default {
    name: 'sysJob-list',
    directives: { permission },
    data() {
      return {
        curHeight: null,
        sysJobData: [],
        status: [ // 数据源
          {value: 0, label: '禁用'},
          {value: 1, label: '启用'},
        ],
        execStatus: [ // 数据源
          {value: 0, label: '未启动'},
          {value: 1, label: '运行中'},
        ],
        pageNum: 1,
        pageSize: 20,
        total: 0,
        queryType: true
      }
    },
    components: {Pagination},
    filters: {
      formatStatus(value) {
        if (value === 0) {
          return '禁用'
        } else if (value === 1) {
          return '启用'
        }
      },
      formatExecStatus(value) {
        if (value === 0) {
          return '未启动'
        } else if (value === 1) {
          return '运行中'
        }
      },

    },
    created() {
      this.comeIn()
      this.beforeMount()
      this.loadJob()
      EventBus.$on('sysJob-add', res => { // 监听新增完毕
        // 更新列表数组
        this.sysJobData.splice(0, 0, res)
      });
      EventBus.$on('sysJob-edit', res => { // 监听新增完毕
        // 更新列表数组
        for (var i = 0; i < this.sysJobData.length; i++) {
          if (this.sysJobData[i].id == res.id) {
            this.$set(this.sysJobData, i, res)
          }
        }
      })
    },
    methods: {
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            if (this.queryType == false) {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              this.curHeight = h - 266 + 50//减去页面上固定高度height
            } else {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              this.curHeight = h - 220 - 55//减去页面上固定高度height
            }
          })()
        }
      },
      chooseClick () {
        this.queryType = !this.queryType
        if (this.queryType == false) {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 266 + 50//减去页面上固定高度height
        } else {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 220 - 55//减去页面上固定高度height
        }
      },
      comeIn() {
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 220 -53//减去页面上固定高度height
      },
      handleDownload() {

      },
      queryClick() {
        this.keyword = this.query;
        this.pageNum = 1
        this.loadJob()
      },
      resetClick() {
        this.keyword = {}
        this.pageNum = 1;
        this.loadJob()
      },
      loadJob() {
        let params = new URLSearchParams()
        params.append('pageNum', this.pageNum)
        params.append('pageSize', this.pageSize)
        // params.append('name', this.keyword.name)
        // params.append('status', this.keyword.status)
        list(params).then(response => {
          console.log(response)
          this.sysJobData = response.data.data
          this.total = response.data.total
        }).catch(error => {
          console.log(error)
        });
      },
      addClick() {
        this.$router.push({
          path: '/sysJob/add'
        })
      },
      editClick(row) {
        this.$router.push({
          path: '/sysJob/edit', query: {id: row.id}

        })
      },
      deleteJob(data) {
        console.log(data)
        var _this = this
        this.$confirm('确认删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(_this.sysJobData, '888')
          del(data.id).then(response => {
            console.log(response)
            _this.sysJobData.forEach(function (item, index) {
              if (item.id == data.id) {
                _this.sysJobData.splice(index, 1)
              }
            });
            _this.$message({
              message: response.content,
              offset: 120,
              center: true
            });
          }).catch(error => {
            console.log(error)
          })
        }).catch(() => {
        });
      },
    }
  }
</script>
<style scoped>
  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/.el-header {
    padding: 10px;
    /* height: 100% !important; */
    padding-bottom: 0;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
  }
  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
  }
</style>
